<template>
  <div>
    <div class="top">
      <div class="top-op">
        <el-button type="primary">上传</el-button>
        <el-button type="success" :icon="FolderAdd">新建文件夹</el-button>
        <el-button type="danger" :icon="DeleteFilled">批量删除</el-button>
        <el-button type="warning" :icon="Rank">批量移动</el-button>
        <div class="search-panel">
          <el-input :suffix-icon="Search"></el-input>
        </div>
        <div class="refresh-btn">
          <el-button :icon="RefreshRight"></el-button>
        </div>
      </div>
      <div class="top-navigation">
        <span>全部文件</span>
      </div>
    </div>
    <div class="file-list">
      <custom-table :pagination="pagination" :data="data" :ext-height="40">
        <el-table-column label="文件名" prop="name">
          <template v-slot="{ row }">
            <div>
              <folder
                style="width: 1.5em; height: 1.5em; margin-right: 8px"
                v-if="row.type === 'folder'"
              />
              <el-button type="text">{{ row.name }}</el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="修改时间" prop="modifyTime" />
        <el-table-column label="大小" prop="size" />
      </custom-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  Search,
  RefreshRight,
  FolderAdd,
  DeleteFilled,
  Rank,
  Folder,
} from "@element-plus/icons-vue";
import CustomTable from "@/components/table/index.vue";

const pagination = { page: 1, pageSize: 15, total: 0 };
const data = [
  { name: "测试文件", modifyTime: "2021-12-12", size: "13K", type: "folder" },
];
</script>

<style lang="scss" scoped>
.top {
  margin-top: 20px;

  .top-op {
    display: flex;
    align-items: center;

    .search-panel {
      width: 300px;
      margin-left: 10px;
    }

    .refresh-btn {
      margin-left: 10px;
    }
  }
}
.top-navigation {
  font-size: 13px;
  display: flex;
  align-items: center;
  line-height: 40px;
  span {
    font-weight: 700;
  }
}
</style>
